<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //append直接在尾部插入,如果希望插入到某某之前就需要insertBefore
        window.onload = function () {
            //先获取元素
            let oBtn1 = document.getElementById('btn1');
            let oUl1 = document.getElementById('ul1');
            let oTxt = document.getElementById('txt1');

            oBtn1.onclick = function () {
                let oLi = document.createElement('li');
                oLi.innerHTML = oTxt.value;

                //参数1:需要添加的节点   参数2:位置,谁的之前
                oUl1.insertBefore(oLi,oUl1.firstElementChild);  //并不需要判断第一个是不是null
                //也可以通过oli[0]来获取第一个元素,但据说ie下会有报错

                oTxt.value = '';
            }
        }



    </script>
</head>

<body>

<div>

    <input type="text" placeholder="..." id="txt1">
    <input type="button" value="insert" id="btn1">
    <ul id="ul1"></ul>


</div>

</body>
</html>